<template>
    <view class="uni-shadow u-p-t-16" @tap="select">
        <u-row class="u-flex u-flex-wrap">
            <u-col v-for="(item,index) in groupItem" :key="index" :span="item.span" 
                class="u-m-t-20 u-font-26" style="flex-direction:row">
                <text v-if="item.field=='bzmc'" class="u-line-1 font-bold">{{item.title}}</text>
                <text v-else class="u-m-r-20 u-line-1 uni-dec-color">{{item.title}}</text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" size="13"/>
                <text v-else class="u-line-1" :style="{maxWidth:item.span==12?'80%':'60%'}" 
                    @longtap="longTap(item.value)">{{item.value}}
                </text>
            </u-col>
        </u-row>
        <view v-if="1==2" class="u-m-t-30 u-flex u-row-right">
            <u-button class="select" type="primary" shape="circle" :plain="true" text="选择"></u-button>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name: 'groupSelect',
    props:{
        listItem: {
            type: Object,
            default () {
                return {}
            }
        },
    },
    data(){
        return{
            groupItem:[
                { field:'bzmc', span:12, title:'班组名称', value:'' },
                { field:'qymc', span:12, title:'所属企业', value: '安薪乐'  },
                { field:'bzzxm', span:6, title:'班组长', value:'', },
                { field:'bzzlxdh', span:6, title:'联系电话', value:'10086',type:'phone' },
                { field:'cyrs', span:5, title:'班组人数', value: ''  },
            ]
        }
    },
    created() {
        this.groupItem.map((v,i)=>{
            if( v.field == 'bzmc' ){
                v.title = this.listItem[v.field]
            }else{
                v.value = this.listItem[v.field]?this.listItem[v.field]:'暂无数据源'
            }
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({ message: value, type: 'default', duration: 3000 })
        }, 

        // 选择班组
        select(){
            this.$emit('selectGroup',{data:this.listItem})
        }
    },
}
</script>

<style scoped lang="scss">
    .select{
        width: 108rpx;
        height: 50rpx;
        margin: 0;
        /deep/.u-button__text{
            font-size: 26rpx !important;
        }
    }
</style>